<template>
  <div id="mapContainer" style="width:100%;height:800px" >
    <div id="map"></div>
  </div>
</template>
<script>

  import $L from "leaflet";
  import "leaflet/dist/leaflet.css";
  // delete L.Icon.Default.prototype._getIconUrl;
  L.Icon.Default.mergeOptions({
    iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
    iconUrl: require("leaflet/dist/images/marker-icon.png"),
    shadowUrl: require("leaflet/dist/images/marker-shadow.png")
  });
  // 解决默认 maker 无法显示的问题
  import icon from "leaflet/dist/images/marker-icon.png";
  import iconShadow from "leaflet/dist/images/marker-shadow.png";
  let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow,
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    tooltipAnchor: [16, -28],
    shadowSize: [41, 41]
  });
  L.Marker.prototype.options.icon = DefaultIcon;
  export default {
    data(){
      return {

      }
    },
    created () {
    },
    mounted () {
      //this.init();
      this.Tunnel();
    },
    methods:{
      init(){
        var map = L.map('map').setView([31.250,121.499], 16);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        /// 同济大学logo在此~！
        L.marker([31.285,121.498] ).addTo(map)
          .bindPopup("<div id ='popup'>"+"<span id='Text'>Welcome to Tongji University! </span>"+"<br>"+"<img id='Photo' src='https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=52475449,2424679726&fm=26&gp=0.jpg'> "+"</div>")
          .openPopup();

        L.circle([31.285,121.498], {
          color: 'red',
          fillColor: '#f03',
          fillOpacity: 0.5,
          radius: 500
        }).addTo(map);

        var fudanpop = L.popup()
          .setLatLng([31.3,121.5])
          .setContent("I am a standalone popup in FuDan University.")
          .openOn(map);

        var popup = L.popup();

        function onMapClick(e) {
          popup
            .setLatLng(e.latlng)
            .setContent("您现在点击的是地图上的点，点坐标为 " + e.latlng.toString())
            .openOn(map);
        }
        map.on('click', onMapClick);

        map.locate({setView: true, maxZoom: 16});

        function onLocationFound(e) {
          var radius = e.accuracy;

          L.marker(e.latlng).addTo(map)
            .bindPopup("您现在位于指示点附近" + radius + "m距离").openPopup();

          L.circle(e.latlng, radius).addTo(map);
        }

        map.on('locationfound', onLocationFound);

        function onLocationError(e) {
          alert(e.message);
        }

        map.on('locationerror', onLocationError);

        var greenIcon = L.icon({
          iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
          shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',

          iconSize:     [38, 95], // size of the icon
          shadowSize:   [50, 64], // size of the shadow
          iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
          shadowAnchor: [4, 62],  // the same for the shadow
          popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
        });

        L.marker([31.287,121.498], {icon: greenIcon}).addTo(map);


      },
      Tunnel(){
        var map = L.map('map').setView([26.4025,99.2], 16);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        var cood=[
          [26.4,99.2],
          [26.4,99.2045],
          [26.40045,99.2045],
          [26.40045,99.20525],
          [26.40295,99.20525],
          [26.40295,99.20475],
          [26.404,99.20475],
          [26.405,99.204],
          [26.405,99.2],
          [26.405,99.196],
          [26.404,99.1955],
          [26.4028,99.1955],
          [26.4028,99.195],
          [26.4003,99.195],
          [26.4003,99.19575],
          [26.4,99.19575],
          [26.4,99.2],
        ];

        L.polyline(cood,{
          color: 'red',
          weight: 3,
          dashArray: '9',
          lineCap: 'square'
        }).addTo(map).bindPopup("<b>"+"建筑限界"+"</b>",{
          direction:'top',
          offest:[-50,-10],
        }).openPopup();
      }
    }
  }
</script>

<style>
  #popup{
    height: 200px;
    width: 300px;
    background-color: antiquewhite;
    text-align: center;

  }

  #Text{
    font-family: "Comic Sans MS";
    font-size: 11pt;
    font-weight: bold;
  }

  #Photo{
    height: 180px;
    width: 280px;
  }

  #map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #mapContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
</style>
